<template>
    <div class="headset-box">
        <div class="headset-content">
            <div class="headset-left">
              <i class="iconfont icon-yuanquan_xuanzhong"></i>
            </div>
            <div class="headset-center">
              <img src="../assets/pms_1589439786.76992727.jpg" alt="">
            </div>
            <div class="headset-right">
                <p>小米真无线蓝牙耳机Air2 SE</p>
                <i class="iconfont icon-xiajiantou">白色</i>
                <div class="words">
                    <span>&yen;169</span>
                    <span>-</span>
                    <span>1</span>
                    <span>+</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "headset"
}
</script>

<style scoped lang="scss">
    .headset-box{
        position: relative;
        padding: 10px;
        //outline: 1px solid green;
        .headset-content{
            //outline: 1px solid blue;
            background-color: white;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            justify-content: space-evenly;
            .headset-left{
                margin-top: 95px;
                .icon-yuanquan_xuanzhong{
                    color: #FD5A36;
                    font-size: 26px;
                }
            }
            .headset-center{
                img{
                   width: 200px;
                   height: 200px;
                }
            }
            .headset-right{
                :nth-child(1){
                    font-weight: bolder;
                    font-size: 20px;
                }
                .icon-xiajiantou{
                    background-color: #eceaea;
                    border-radius: 5px;
                }
                .words{
                    width: 224px;
                    position: absolute;
                    right: 58px;
                    bottom: 61px;
                    display: flex;
                    justify-content: space-evenly;
                    :nth-child(1){
                        color: #FD5A36;
                    }
                }
            }
        }
    }
</style>